<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>房盟网</title>
  <link rel="stylesheet" href="../css/reset.css">
  <link rel="stylesheet" href="../css/head.css">
  <link rel="stylesheet" href="../css/lp_list.css">
  <link rel="stylesheet" href="../css/swiper.min.css">
  <link rel="stylesheet" href="../css/animate.min.css">
  <link rel="stylesheet" href="http://www.jq22.com/jquery/font-awesome.4.6.0.css">

</head>
<body>
<!--头部-->
<div class="top">
  <div class="normal-size clearfix">
    <div class="logo f"><img src="../images/logo.png" alt=""></div>
    <div class="login r ">
      <ul class="clearfix login-list clearfix">
        <li>
          <!--搜索框-->
          <div class="top-search">
            <div class="top-search-btn" ><img src="../images/search_icon.png" alt=""></div>
            <div class="top-search-input clearfix" style="display: none">
              <div class="f s-filter f">
                <div class="select-menu">
                  <div class="select-menu-div">
                    <input id="No1"  readonly class="select-menu-input"/>

                    <i class="fa fa-caret-down"></i>
                  </div>
                  <ul class="select-menu-ul" >
                    <li class="select-this">楼盘</li>
                    <li>资讯</li>
                    <li>动态</li>
                  </ul>
                </div>
              </div>
              <input class="t-search-box f" type="text" placeholder="请输入城市/楼盘">
              <div class="search-btn f"><img src="../images/search_icon.png" alt=""></div>
            </div>
          </div>
        </li>
        <!--登录和注册-->
        <li class="user-icon">
          <img src="../images/user.png" alt="">
        </li>
        <li class="login">登录</li>
        <li class="login border">|</li>
        <li class="login zhuce">注册</li>
      </ul>
    </div>
  </div>
</div>
<!--导航栏-->
<div class="navbox">
  <div class="nav-contact normal-size clearfix">
    <div class="nav f">
      <ul class="nav-list clearfix">
        <li class="nav-item"><a href="index.html">首页</a><div class="arrow-d"><img src="../images/arrow_down.png" alt=""></div></li>
        <li class="nav-item on"><a href="#">新房</a><div class="arrow-d"><img src="../images/arrow_down.png" alt=""></div></li>
        <li class="nav-item"><a href="#">房产资讯</a><div class="arrow-d"><img src="../images/arrow_down.png" alt=""></div></li>
        <li class="nav-item"><a href="#">房盟加盟 <b class="dp">·</b></a><div class="arrow-d"><img src="../images/arrow_down.png" alt=""></div></li>
        <li class="nav-item"><a href="#">关于我们</a><div class="arrow-d"><img src="../images/arrow_down.png" alt=""></div></li>
      </ul>
    </div>
    <div class="r contact-app clearfix">
      <div class="contact-tel f clearfix">
        <div class="tel-icon f"><img src="../images/tel_icon.png" alt=""></div>
        <p class="tel-num f">
          <span class="hot-line">合作热线：</span>
          <span class="num">4008-17-0898</span>
          <span class="hot-line">转</span>
          <span class="num">888</span>
        </p>
      </div>
      <div class="app-code f clearfix">
        <div class="app-icon f"><img src="../images/phone.png" alt=""></div>
        <p class="app-text f">下载房盟APP</p>
        <img class="app-code-img" src="../images/app_code.png" alt="">
      </div>
    </div>
  </div>
</div>

<!--筛选框-->
<div class="filter-box normal-size">
  <!--区域列表-->
  <div class="filter-item-box">
    <ul class="clearfix qu-ul">
      <li class="filter-t">区域 :</li>
      <li class="filter-all">全部</li>
      <li class="filter-item on">
        <span class="item-text">海南</span>
        <span class="num-box">(<em class="item-num">90</em>)</span>
        <div class="sanjiao"><img src="../images/sanjiao.jpg" alt=""></div>
      </li>
      <li class="filter-item ">
        <span class="item-text">云南</span>
        <span class="num-box">(<em class="item-num">90</em>)</span>
        <div class="sanjiao"><img src="../images/sanjiao.jpg" alt=""></div>
      </li>
      <li class="filter-item ">
        <span class="item-text">广东</span>
        <span class="num-box">(<em class="item-num">100</em>)</span>
        <div class="sanjiao"><img src="../images/sanjiao.jpg" alt=""></div>
      </li>
      <li class="filter-item ">
        <span class="item-text">广西</span>
        <span class="num-box">(<em class="item-num">190</em>)</span>
        <div class="sanjiao"><img src="../images/sanjiao.jpg" alt=""></div>
      </li>
    </ul>
    <!--区域下城市列表-->
    <div class="filter-cities">
      <ul class="cities clearfix">
        <li class="city-all">全部</li>
        <li class="city-text-box on">
          <span class="city-text">昆明</span>
          <span class="num-box">(<em class="item-num">190</em>)</span>
        </li>
        <li class="city-text-box">
          <span class="city-text">丽江</span>
          <span class="num-box">(<em class="item-num">190</em>)</span>
        </li>
        <li class="city-text-box">
          <span class="city-text">大理</span>
          <span class="num-box">(<em class="item-num">190</em>)</span>
        </li>
      </ul>
    </div>
  </div>
  <!--类型列表-->
  <div class="filter-item-box">
    <ul class="clearfix">
      <li class="filter-t">类型 :</li>
      <li class="filter-all">不限</li>
      <li class="filter-item on"><span class="item-text">住宅</span></li>
      <li class="filter-item"><span class="item-text">公寓</span></li>
      <li class="filter-item"><span class="item-text">别墅</span></li>
      <li class="filter-item"><span class="item-text">商铺</span></li>
      <li class="filter-item"><span class="item-text">海景房</span></li>
      <li class="filter-item"><span class="item-text">酒店式公寓</span></li>
      <li class="filter-item"><span class="item-text">产权式酒店</span></li>
      <li class="filter-item"><span class="item-text">写字楼</span></li>
      <li class="filter-item"><span class="item-text">豪宅</span></li>
    </ul>
  </div>
  <!--价格列表-->
  <div class="filter-item-box">
    <ul class="clearfix">
      <li class="filter-t">价格 :</li>
      <li class="filter-all">不限</li>
      <li class="filter-item on"><span class="item-text">5000元/㎡以下</span></li>
      <li class="filter-item"><span class="item-text">5000-8000㎡</span></li>
      <li class="filter-item"><span class="item-text">8000-1万元/㎡</span></li>
      <li class="filter-item"><span class="item-text">1万-1.2万元/㎡</span></li>
      <li class="filter-item"><span class="item-text">1.2万-1.4万元/㎡</span></li>
      <li class="filter-item"><span class="item-text">1.4万-1.6万元/㎡</span></li>
      <li class="filter-item"><span class="item-text">1.6万-1.8万元/㎡</span></li>
      <li class="filter-item"><span class="item-text">1.8万-2万元/㎡</span></li>
      <li class="filter-item"><span class="item-text">2万元以上/㎡</span></li>
    </ul>
  </div>
  <!--户型列表-->
  <div class="filter-item-box">
    <ul class="clearfix">
      <li class="filter-t">户型 :</li>
      <li class="filter-all">不限</li>
      <li class="filter-item on"><span class="item-text">一室</span></li>
      <li class="filter-item"><span class="item-text">二室</span></li>
      <li class="filter-item"><span class="item-text">三室</span></li>
      <li class="filter-item"><span class="item-text">四室</span></li>
      <li class="filter-item"><span class="item-text">五室</span></li>
      <li class="filter-item"><span class="item-text">五室以上</span></li>
    </ul>
  </div>
</div>

<!--楼盘列表-->
<div class="lp-list-box normal-size">
  <!--列表头部-->
  <div class="lp-sort-filter clearfix">
    <div class="f sort clearfix">
      <div class="sort-item on f"><span>全部</span><em class="sort-num">(99)</em></div>
      <div class="sort-item f"><span>代表项目</span><em class="sort-num">(99)</em></div>
      <div class="sort-item f"><span>分销项目</span><em class="sort-num">(99)</em></div>
    </div>
    <div class="r filter-l">
      <ul class="select-filter clearfix">
        <li class="f filter-l-item on moren">默认排序</li>
        <li class="f filter-l-item price-box open clearfix"><span class="price f">价格</span><img class="price-icon" src="../images/price-icon.png" alt=""></li>
        <li class="f filter-l-item lp-date">开盘时间</li>
        <li class="f filter-l-item select-w"  style="padding-right: 0">
          <div class="content">
            <div class="select" id="select-box">
              <p data-value="销售状态">销售状态</p>
              <ul>
                <li data-value="待售" class="Selected">待售</li>
                <li data-value="预售">预售</li>
                <li data-value="在售">在售</li>
                <li data-value="尾盘">尾盘</li>
                <li data-value="售完">售完</li>
              </ul>
            </div>
          </div>
        </li>
      </ul>
    </div>
  </div>

  <!--楼盘列表内容-->
  <div class="lp-list-content">
    <ul class="lp-list-ul">
      <li class="clearfix lp-list-item">
        <a class="f" href="#">
          <div class="lp-list-img over_hide"><img class="scale" src="../images/lp-img.jpg" alt=""></div>
        </a>
        <div class="lp-detail f">
          <p class="lp-t clearfix">
            <span class="lp-city f">昆明</span>
            <em class="f">|</em>
            <a class="f lp-name" href="#">北大华府恩祥小区</a>
          </p>
          <p class="lx clearfix">
            <span class="lx-item f">住宅</span>
            <span class="lx-item f">酒店式公寓</span>
            <span class="lx-item f">商铺</span>
          </p>
          <p class="date-box clearfix">
            <span class="date-detail f"><label>开盘时间：</label><em>2018-09-09</em></span>
            <span class="date-detail f"><label>入住时间：</label><em>2018-09-09</em></span>
          </p>
          <p class="address clearfix">
            <img class="f" src="../images/Pin.png" alt="">
            <span class="f address-text">云南官渡区昆明经开区信息产业基地春漫大道</span>
          </p>
          <p class="ts-list clearfix">
            <span class="ts-item f">养老居所</span>
            <span class="ts-item f">海景房</span>
            <span class="ts-item f">宜居生态</span>
            <span class="ts-item f">新上房源</span>
          </p>
        </div>

        <div class="lp-price-yj r">
          <p class="price-box"><span class="lp-price">6000</span><em>元/㎡</em></p>
          <div class="yj-box">
            <ul class="clearfix">
              <li class="f">佣金：</li>
              <li class="f yj-price">？</li>
              <li class="f yj-login-btn">登录查看</li>
            </ul>
          </div>
        </div>
      </li>
      <li class="clearfix lp-list-item">
        <a class="f" href="#">
          <div class="lp-list-img over_hide"><img class="scale" src="../images/lp-img.jpg" alt=""></div>
        </a>
        <div class="lp-detail f">
          <p class="lp-t clearfix">
            <span class="lp-city f">昆明</span>
            <em class="f">|</em>
            <a class="f lp-name" href="#">北大华府恩祥小区</a>
          </p>
          <p class="lx clearfix">
            <span class="lx-item f">住宅</span>
            <span class="lx-item f">酒店式公寓</span>
            <span class="lx-item f">商铺</span>
          </p>
          <p class="date-box clearfix">
            <span class="date-detail f"><label>开盘时间：</label><em>2018-09-09</em></span>
            <span class="date-detail f"><label>入住时间：</label><em>2018-09-09</em></span>
          </p>
          <p class="address clearfix">
            <img class="f" src="../images/Pin.png" alt="">
            <span class="f address-text">云南官渡区昆明经开区信息产业基地春漫大道</span>
          </p>
          <p class="ts-list clearfix">
            <span class="ts-item f">养老居所</span>
            <span class="ts-item f">海景房</span>
            <span class="ts-item f">宜居生态</span>
            <span class="ts-item f">新上房源</span>
          </p>
        </div>

        <div class="lp-price-yj r">
          <p class="price-box"><span class="lp-price">6000</span><em>元/㎡</em></p>
          <div class="yj-box">
            <ul class="clearfix">
              <li class="f">佣金：</li>
              <li class="f yj-price">？</li>
              <li class="f yj-login-btn">登录查看</li>
            </ul>
          </div>
        </div>
      </li>
    </ul>
    <!--页码-->
    <div class="page-list">
      <ul class="clearfix">
        <li class="page-item pre-page">上一页</li>
        <li class="page-num on">1</li>
        <li class="page-num">2</li>
        <li class="page-num">3</li>
        <li class="page-item next-page">下一页</li>
      </ul>
    </div>
  </div>
</div>


<!--尾部-->
<footer>
  <div class="footer-t clearfix">
    <div class="normal-size">
      <div class="footer-contact f">
        <ul>
          <li class="footer-contact-item clearfix" style="margin-top: 55px">
            <span class="f-icon f" ><img style="width: 28px" src="../images/f_tel.png" alt=""></span>
            <span class="f-contact-t f">合作热线</span>
            <span class="f-contact-text f">4008-17-0898 转 888</span>
          </li>
          <li class="footer-contact-item clearfix">
            <span class="f-icon f" ><img style="width: 27px;height: 19px" src="../images/mail.png" alt=""></span>
            <span class="f-contact-t f">合作邮箱</span>
            <span class="f-contact-text f">4008-17-0898 转 888</span>
          </li>
          <li class="footer-contact-item clearfix">
            <span class="f-icon f"><img  style="width: 18px;height: 26px;" src="../images/location.png" alt=""></span>
            <span class="f-contact-t f">公司地址</span>
            <span class="f-contact-text f">海南省海口市龙昆南路76号金霖花园别墅7栋</span>
          </li>
        </ul>
      </div>
      <div class="f-nav f">
        <div class="hide-btn-box">
          <div class="hide-btn">
            <div class="btn-img-box">
              <img src="../images/f-arrow-d.png" alt="">
            </div>
          </div>
          <div class="f-logo"><img src="../images/f-logo.png" alt=""></div>
          <div class="f-nav-list">
            <ul class="clearfix">
              <li class="f-nav-item"><a href="#">首页</a></li>
              <li class="f-nav-border">|</li>
              <li class="f-nav-item"><a href="#">公司介绍</a></li>
              <li class="f-nav-border">|</li>
              <li class="f-nav-item"><a href="#">合作案例</a></li>
              <li class="f-nav-border">|</li>
              <li class="f-nav-item"><a href="#">加盟标准</a></li>
              <li class="f-nav-border">|</li>
              <li class="f-nav-item"><a href="#">合作协议</a></li>
            </ul>
          </div>
          <p class="copyRight">copyright © 2015-2018 www.fangmeng.com All Rights Reserved 琼ICP备15002905号</p>
        </div>
      </div>
      <div class="f-code f clearfix">
        <div class="code-img app f">
          <img src="../images/app_code.png" alt="">
          <p>房盟网APP</p>
        </div>
        <div class="code-img f">
          <img src="../images/web_code.png" alt="">
          <p>房盟网微信号</p>
        </div>
      </div>
    </div>
  </div>
</footer>
<script src="../js/jquery.min.js"></script>
<script src="../js/head.js"></script>
<script>
  //筛选条件
  $('.filter-all').click(function(){
    $(this).addClass('on').siblings('.filter-item').removeClass('on');
    $(this).parents('.qu-ul').siblings('.filter-cities').slideUp();
  });
  $('.filter-item').click(function(){
    $(this).addClass('on').siblings().removeClass('on');
    $(this).parents('.qu-ul').siblings('.filter-cities').slideDown();
  });
  $('.cities li').click(function(){
    $(this).addClass('on').siblings().removeClass('on');
  });

//  楼盘分类
  $('.sort-item,.filter-l-item,.page-num').click(function(e){
    $(this).addClass("on").siblings().removeClass("on");
    $(this).toggleClass('open');
    $(".select").removeClass("open");
  });




  //筛选下拉
  $(function(){
    $('.select-w .select').click(function(e){
        $(this).toggleClass('open');
        $(this).parents('.select-w').addClass("on").siblings().removeClass("on");
        e.stopPropagation();
    });

    $(".content .select ul li").click(function(e){
      var _this=$(this);
      $(".select > p").text(_this.attr('data-value'));
      _this.addClass("Selected").siblings().removeClass("Selected");
      $(".select").removeClass("open");
      e.stopPropagation();
    });

    $(document).on('click',function(){

    })

  });
//  $('*').on('click',':not(#select-box)',function(){
//    $('#select-box').removeClass('open');
//    console.log("fds fsd")
//  });

//  $(document).click(function (e) {
//    var con = $("#select-box");   // 设置目标区域
//    if (!con.is(e.target) && con.has(e.target).length === 0) {
//      $('#select-box').removeClass('open')
//    }
//  });

</script>
</body>
</html>